<?php  
 echo $this->Html->css(array('style-product'));
echo $this->Html->script(array('jquery-easing-1.3.pack','jquery-easing-compatibility.1.2.pack','coda-slider.1.1.1.pack'));
?>
<script type="text/javascript">
	
		var theInt = null;
		var $crosslink, $navthumb;
		var curclicked = 0;
		
		theInterval = function(cur){
			clearInterval(theInt);
			
			if( typeof cur != 'undefined' )
				curclicked = cur;
			
			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.removeClass("active-thumb");
				$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$(".stripNav ul li a").eq(curclicked).trigger('click');
				curclicked++;
				if( 6 == curclicked )
					curclicked = 0;
				
			}, 3000);
		};
		
		$(function(){
			
			$("#main-photo-slider").codaSlider();
			
			$navthumb = $(".nav-thumb");
			$crosslink = $(".cross-link");
			
			$navthumb
			.click(function() {
				var $this = $(this);
				theInterval($this.parent().attr('href').slice(1) - 1);
				return false;
			});
			
			theInterval();
		});
</script>
<div id="zt-colright" class="span9">
	<div id="zt-modwrap">
		<div class="zt-modwrap-pad">
			<div id="zt-colleft" class="span12">
				<div class="module-color zt-mod-br">
					<div class="zt-mod-bl">
						<div class="zt-mod-tr">
							<div class="zt-mod-tl clearfix">
								<h3><span><?php echo __('headerProduct',true);?></span></h3>
								<div class="mod-content">
									<div class="custom-color">
										<?php if($product){?>
										<h2 class="contentheading"> <?php echo $product['Product']['name'];?> </h2>
										<hr>
										<p align="justify" style="font-weight:bold;"><?php echo $product['Product']['shortcontent']?></p>			
										<div><?php echo $product['Product']['longcontent']?></div>
										<?php if(count($product['Image'])!=0){?>
										<!--ảnh cho sản phẩm-->
										<div class="zt-box-info">Ảnh cho sản phẩm</div>	
										<div id="page-wrap">
											<div class="slider-wrap">
												<div id="main-photo-slider" class="csw">
													<div class="panelContainer">
														<?php $i = 0;?>
														<?php foreach($product['Image'] as $item){?>
														<?php $i++;//debug($product['Image']);?>
														<div class="panel" title="Panel <?php echo $i;?>">
															<div class="wrapper">
																<img src="<?php echo $this->webroot;?>files/uploads/products/<?php echo $item['url'];?>" alt=""height="285" width="419" />
																<div class="photo-meta-data">
																	<?php echo $product['Product']['name'];?>
																	<br />
																	<span><?php echo $item['note'];?></span>
																</div>
															</div>
														</div>
														<?php }?>
													</div>
												</div>
												<?php $i = 0;?>
												<?php foreach($product['Image'] as $item){?>
												<?php $i++;?>
												<?php if($i==1){?>
													<a href="#<?php echo $i;?>" class="cross-link active-thumb" style="margin-top:-12px;"><img src="<?php echo $this->webroot;?>files/uploads/products/<?php echo $product['Image'][0]['url'];?>" class="nav-thumb" alt="temp-thumb" height="45"/></a>
													<?php }else{?>
													<div id="movers-row">					
														<div><a href="#<?php echo $i;?>" class="cross-link"><img src="<?php echo $this->webroot;?>files/uploads/products/<?php echo $item['url'];?>" class="nav-thumb" alt="temp-thumb" height="45"/></a></div>		
													</div>
													<?php }?>
												<?php }?>
											</div>
										</div>
										<!--end ảnh-->
										<?php }?>
										<div class='zt-box-info'><?php echo __('headerOther',true);?></div>
										<ul>
										<?php foreach($otherproduct as $onews): ?>
										<li>
										<?php echo $this->Html->link($onews['Product']['name'],array('language'=>$lang,'controller'=>'products','action'=>'chitiet',$this->Link->seo($onews['Product']['id'],$onews['Product']['name'])));?>
										</li>
										<?php endforeach;?>
										<?php }else{?>
											<div class="alert-messenger" style="padding-top: 50px;">Bài viết không tồn tại!!!</div>
										<?php }?>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>